<template>
  <view class="content ">
    <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>
    <!-- <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading> -->
    <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y @scroll="scrollPage" show-scrollbar="false">

      <view class="bgCart">
        <view class="cartTop">
          <view class="cartAd">
            <view class="cartAd_title">{{ navBarTitle }}</view>
          </view>
          <view class="userInfo">
            <!-- 有房子 待付款服务商品不显示地址-->
            <view class="userInfo_left">
              <!-- <view class="user_address"> <view class="user_address_text">{{ houseName }}</view> </view> -->
              <view class="userInfo_bottom">
                <text class="userName" style="margin-right: 10px;">{{ userName }}</text>
                <text class="userTel">{{ userTel }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 彩色的线 -->
        <view class="clearfix">
          <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png" alt=""
            style=" display:block; width: 100%; height:3px;" />
        </view>

        <view class="cartList">
          <view class="goodsWraper clearfix" v-for="(item,index) in ordeDetailProductInfoList" :key="index"
            :id="'package' + index">
            <view class="wraper_left" @tap="toServiceGoodsDetail(item, index)">
              <view class="goodsPic"> <img class="img" :src="item.imgUrl" mode="widthFix" /> </view>
              <view class="goodsText">
                <view class="goodsText_top">
                  <view class="goodsTop">
                    <view class="goods_T">{{ item.productName }}{{ item.specName }}</view>
                    <view class="goods_price">X {{ item.buyNum }}</view>
                  </view>
                  <view class="googsMiddle">
                    <view class="goods_specs" v-if="Number(orderStatus) == 4 || Number(orderStatus)==5 || Number(orderStatus)==7">{{ item.specName }}</view>
                    <view class="goods_specs" v-else>有效期至{{expireDate}}</view>
                  </view>
                </view>
                <view class="goodsBottom">
                  <view class="jifen_box"> <span v-if="item.productPrice && item.productPrice!=='0' " style="margin-right: 16rpx;">￥{{ item.productPrice }}</span>
                    <span v-if="item.maxUsefulPoints && item.maxUsefulPoints !=='0'">
                      <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                        alt="" style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;" />
                      {{ item.maxUsefulPoints }}</span>
                  </view>
                </view>
              </view>
            </view>
            <view class="detailsBtnArea t28" v-if="item.afterSalesStatus !== -1 || (item.afterSalesStatus==1|| item.afterSalesStatus==2 || item.afterSalesStatus==3)">
                <view class="btnAreaLeft"></view>
                <view class="btnAreaRight">
                  <button type="default" v-if="item.afterSalesStatus==1" plain class="blackBlackBtn" @click="toAfterSaleProcessDetail(item)">退款中</button>
                  <button type="default" v-if="item.afterSalesStatus==2" plain class="blackBlackBtn" @click="toAfterSaleProcessDetail(item)">退款成功</button>
                  <button type="default" v-if="item.afterSalesStatus==3" plain class="blackBlackBtn" @click="toAfterSaleProcessDetail(item)">退款关闭</button>
                </view>
            </view>
            <view class="cartListBottom" v-if="item.afterSalesStatus == -1 &&  Number(orderStatus) !== 4 && Number(orderStatus) !== 5 && Number(orderStatus) !== 7">
              <van-button type="primary" @click="toUseService" v-if="isShowGoUse == 1 && (Number(orderStatus) == 6 || Number(orderStatus) == 0)">去使用</van-button>
              <view class="useStatus" v-if="usedTimes > 0">
                <view class="useStatus-left">
                  <view class="useStatus-label">使用情况</view>
                  <view class="useStatus-content">已使用{{ usedTimes }}次</view>
                </view>
                <view class="useStatus-right" @tap="checkedRecord()"> <van-icon name="arrow" size="11" /> </view>
              </view>
            </view>
          </view>
        </view>
        <orderInfo :orderInfo="orderInfo" :orderStatus="orderStatus"></orderInfo>
      </view>
    </scroll-view>

    <view class="bottom pageBottomBtnArea" v-if="Number(orderStatus) !==4">
      <view class="service-o-icon"> <img
          src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/kefu.png" alt=""> </view>
      <view class="pageBottomBtnArea_btn" style="width: calc(100% - 196rpx );">
        <button type="default" plain style="margin: 0px;" class="grayBtn" @click="submitApply" :disabled=" Number(orderStatus) == 6 && Number(isShowAfterSales) ==1 && isAllApplied"
          v-if="(params.status=='待使用' || Number(orderStatus) == 6 )&& Number(isShowAfterSales) ==1 ">申请售后</button>
        <button type="default" plain style="margin: 0px;" class="grayBtn" @click="deleteOrder" v-if="Number(orderStatus) !== 6">删除订单</button>
        <button plain type="waring" class="orangeBtn" :class="{'fr':Number(orderStatus) !== 6}" @click="submitAnotherOrder">再来一单</button>
      </view>
    </view>
    <!-- 待付款 -->
    <view class="bottom bottomBtnArea pageBottomBtnArea" v-if="Number(orderStatus)==4 " style="height: 144rpx;">
      <button type="default" plain style="margin: 0px; padding: 0 34rpx;" class="button"
        @click="cancelBtn">取消订单</button>
      <view class="checkoutBtn" :class="{ disabled: isTimeout }" @click="toPayment">付款 <text
          style="margin-left: 10px;">{{ formatRemainingTime }}</text> </view>
    </view>

    <van-dialog id="van-dialog" confirm-button-color='#ff6203' />
    <cancelOrder :show="cancelPopup" @closeCancelPopup="closeCancelPopup" :orderId="params.orderId" :orderType="orderType" ></cancelOrder>
    <!-- <applyAfterSales :show="showAfterSale" @closeApply="closeApplyPopup" :orderId="orderId"
      :orderDetailIdList="orderDetailIdList" :ordeDetailProductInfoList="ordeDetailProductInfoList"
      :sourceType="sourceType" :refundType="refundType"></applyAfterSales> -->
    <serviceRecord :show="showServiceRecord" @closeRecord="closeRecordPopup"></serviceRecord>
  </view>
</template>
  
  <script>
  import { SOURCE_TYPE } from '@/utils/constant'
  import Dialog from '@/wxcomponents/vant/dialog/dialog'
  import cancelOrder from '@/mycomponents/shangcheng/cancelOrder.vue'
  import loading from '@/mycomponents/loading.vue'

  // import applyAfterSales from '@/mycomponents/shangcheng/applyAfterSales.vue'
  import serviceRecord from '@/mycomponents/myService/serviceRecord.vue';
  // import paymentPopup from '@/mycomponents/shangcheng/paymentPopup.vue'
  import orderInfo from '@/mycomponents/shangcheng/orderInfo.vue'

  import {getOrderDetailApi,cancelOrderApi,getAfterSalesOrderValidityApi,deleteOrderApi} from '@/api/order'

  
  export default {
  
      components: {
        cancelOrder,
        serviceRecord,
        orderInfo,
        loading
      },
      name: 'Cart',
      data () {
          return {
            isrefresher: false,
            loadingIsShow: true,
            loadingIsShowPage: true,
              navBarTitle: '订单详情',
              scrolling: false, // 顶部区域吸顶效果
              houseName: '金鑫·滨湖一号3号楼1单元201',
              ebUserAddressList:[],
              showAfterSale: false,
              showServiceRecord: false,
              currentIndex: 0, // 配送方式的tab
              deliveryMethod: 'peisong',
              shippingType: '1', // 配送方式 1:自提 2:同城配送
              tabBarList: [
                  { name: '自提', key: 'ziti' },
                  { name: '同城配送', key: 'tongcheng' }
              ],
              userName: undefined,
              userTel: undefined,
              businessHours: '09:00-19:00', // 营业时间
              selfPickupName: '有',
              myJifen: '0', // 我的积分
              ordeDetailProductInfoList: [],
              fullDiscount:undefined, //满减活动
              coupon:undefined, //优惠券
              myCouponShow: false, // 优惠券弹窗
              paymentShow: false, // 支付方式选择弹窗
              freight: '0', // 是否显示运费 运费金额
              isApply: false,//申请售后
              refundType:1, //售后类型 1:仅退款 2:退货并退款 售后类型1=退货退款, 2=退款, 3=其他 4=服务退款
              cancelPopup: false, // 取消订单
              payAmount: undefined, //支付金额
              payPoints: undefined, //支付使用积分
              totalAmount: undefined, // 订单总金额
              status:undefined,
              orderNo: '1254121144441', // 订单编号
              orderId:undefined,
              orderType:undefined,// 商品类型  0=商品订单 1=服务订单
              orderDetailIdList:[],
              orderTime: '2025/01/21 16:49:55',
              orderType:undefined,// 商品类型  0=商品订单 1=服务订单
              productId:undefined, //订单中商品id
              selectSuk:undefined,//订单中商品的规格
              productAttrValueId:undefined, //订单中商品的规格id
              countdownText: '',
              countdown: 0,
              startTime: '',
              pageBiaoshi: 'order',
              totalSeconds: 30 * 60 * 1000, // 总秒数，初始化为30分钟对应的秒数
              remainingTime: '', // 存储倒计时剩余时间的字符串表示
              timer: null, // 定时器引用，用于每秒更新倒计时
              params: {}, // 路由传参
              source:undefined, //页面来源
              sourceType:'orderService',
              orderStatus:'4', //订单状态-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款 5: 已取消  6: 待使用
              wxUserBaseInfo:{},
              productId:undefined, //订单中商品id
              selectSuk:undefined,//订单中商品的规格
              productAttrValueId:undefined, //订单中商品的规格id
              orderId:undefined,
              selfPick:null,
              addressId:undefined,
              orderDetailIdList:[],
              canApply:false,//是否可以去申请售后
              usedTimes:1, //使用次数
              isShowGoUse:1, //是否显示去使用按钮
              expireDate:undefined, //有效期
              orderInfo:{},
              isShowAfterSales:false,//是否显示售后按钮 // 0=不显示1=显示
              isAllApplied:false,//是否全部售后 
          }
      },
  
      computed: {
        formatRemainingTime () {
            if (this.remainingTime <= 0 || isNaN(this.remainingTime)) {
                return '00:00:00'
            }
            const hours = Math.floor(this.remainingTime / (1000 * 60 * 60))
            const minutes = Math.floor((this.remainingTime % (1000 * 60 * 60)) / (1000 * 60))
            const seconds = Math.floor((this.remainingTime % (1000 * 60)) / 1000)

            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
        },
        // 检查倒计时是否超时
        isTimeout() {
          return this.remainingTime <= 0;
        }
      },
  
      watch: {
        formatRemainingTime: {
            handler(newVal) {
                if (newVal === '00:00:01' || newVal === '00:01' || newVal === '00:00:00' || newVal === '00:00') {
                    this.cancelOrderWhenTimeout();
                }
            },
            immediate: false // 不立即执行
        }
      },
      onLoad (data) {
          if (data !== null) {
              this.params = JSON.parse(decodeURIComponent(data.params))
              console.log(this.params,'params')
              this.source = this.params.source || SOURCE_TYPE.DEFAULT  // 设置默认来源类型
              this.status = this.params.status   //unpaid  cancel unshipped unreceived unreviewed
              this.orderStatus = this.params.orderStatus
              this.orderNo = this.params.orderNo || undefined
              this.orderId = this.params.orderId || undefined
              this.myHouse = this.params.myHouse || false

              console.log(this.orderId, 'orderId-----',this.orderId = this.params.orderId )
              console.log(this.params.orderStatus, this.orderStatus == '0')

              this.pageBiaoshi=this.params.pageBiaoshi
              if (this.params.myHouse) {
                  this.myHouse = this.params.myHouse
              }
           
  
          }
          // this.startCountdown()
      },
      onShow(){
        this.getOrderDetail(this.orderId)
      },
  
      onReady () { 
        this.startCountdown()
      },
      beforeDestroy() {
        if (this.timer) {
          clearInterval(this.timer)
        }
      },
      methods: {
        // 页面左上角返回按钮
        onClickLeft() {
            // uni.navigateBack()
            console.log(this.source, 'source')
            const returnMap = {
              [SOURCE_TYPE.CART]: '/pages/shoppingCart/gouwuche',
              [SOURCE_TYPE.ORDER]: '/pages/orders/myOrder',
              [SOURCE_TYPE.PROMOTION]: '/pages/activity/promotionDetail',
              [SOURCE_TYPE.DETAIL]: '/pages/shangcheng/goodsDetail',
              [SOURCE_TYPE.SERVICE]: '/pages/find/index',
              [SOURCE_TYPE.DEFAULT]: '/pages/orders/myOrder',
            };
            const targetSource = this.source || SOURCE_TYPE.DEFAULT;
            const targetUrl = returnMap[targetSource] || SOURCE_TYPE.DEFAULT;

            const params = {
              source: targetSource,
              isPay: this.paymentStatus == 'SUCCESS',
              orderId: this.orderId,
              productId: this.productId,
              status: 'paid',
              orderStatus: -1 //-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款；5：退款
            }
            const fullUrl = `${targetUrl}?params=${encodeURIComponent(JSON.stringify(params))}`;
            // 清除页面栈后跳转
            // 清除页面栈后跳转
            if (targetSource !== SOURCE_TYPE.SERVICE) {
              uni.redirectTo({ url: fullUrl });
              return;
            }else{
              uni.switchTab({ url: '/pages/find/index' })
            }

        },
        // 滑动页面
        scrollPage(e) {
          console.log(e.detail.scrollTop, this.scrolling)
          if (e.detail.scrollTop > 25 && !this.scrolling) {
            this.scrolling = true
          } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
            this.scrolling = false
          }
        },
        // 商品详情
        toServiceGoodsDetail(item, index) {
          const params = {}
          params.item = item
          params.productId = item.productId
          params.biaozhi = 'oderDetail'
          uni.navigateTo({  url: '/pages/service/serviceDetail?params=' + encodeURIComponent(JSON.stringify(params)) })
        },
        // 复制
        copytext(text) {
          var that = this
          wx.setClipboardData({
            data: that.orderNo,
            success: function (res) {
              wx.showToast({
                title: '复制成功',
                icon: 'success',
                duration: 2000
              })
            }
          })
        },
      // 取消订单  打开取消订单的弹窗
      cancelBtn() {
        if (this.isTimeout && Number(this.orderStatus)  == 4) {
          return false
        }
        this.cancelPopup = true
      },

      // 关闭取消订单弹窗
      closeCancelPopup(isCancel, sign) {
          console.log(isCancel, 'isCancel', sign)
          this.isCancel = isCancel
          this.cancelPopup = false

          if (sign == 'submit') {
            this.getOrderDetail(this.orderId)
          }
      },
        //去付款
        toPayment() {
            if (this.isTimeout && Number(this.orderStatus) == 4) {
              return false
            }
            const params = {
              pageSymbol: 'serviceGoods',
              orderId: this.orderId,  //订单id
              totalAmount: this.payAmount,  //订单需支付总金额
              orderNo: this.orderNo, //订单号
              source: this.source,
            }
            uni.navigateTo({ url: '/pages/payment/cashPage?params=' + encodeURIComponent(JSON.stringify(params)) })
        },
        // 删除订单
        deleteOrder(){
            Dialog.confirm({
              message: '确认删除记录'
            }).then(() => {
              deleteOrderApi(this.orderId).then(res => {
                console.log(res, '删除订单')
                if (res.code == 200) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'success',
                    duration: 2000
                  })
                  uni.redirectTo({ url: '/pages/orders/myOrder' })
                }
              })
            })
            .catch(() => {
              console.log('cancel')
            })
        },

        // 去使用
        toUseService() {
          uni.navigateTo({ url: '/pages/myService/myService' })
        },
        // 服务记录
        checkedRecord() {
          this.showServiceRecord = true
        },
        // 关闭服务记录
        closeRecordPopup() {
          this.showServiceRecord = false
        },

        // 再来一单
        submitAnotherOrder() {
          const params = {
            orderId: this.orderId,
            source: this.source,
            pageSymbol:'serviceGoods',
            productId: this.productId,
          }
          // params.showSpecsPopup = true
          uni.navigateTo({
            url: '/pages/service/serviceDetail?params=' +
              encodeURIComponent(JSON.stringify(params))
          })
        },

        // 申请售后
        submitApply() {
          if (this.isAllApplied) {
            Dialog.alert({
              message: '您已申请过售后，请勿重复申请'
            })
            return false
          }
          getAfterSalesOrderValidityApi(this.orderId).then(res => {
            console.log(res, 'getAfterSalesOrderValidityApi')
            if (res.code == 200) {
                this.canApply = true
                this.refundType = '1'  //退款类型 1:仅退款 2:退款并退货
                const params = {
                  // refundType: '1', //退款类型 1:仅退款 2:退款并退货
                  title: '退款',
                  orderId: this.orderId,
                  orderDetailIdList: this.ordeDetailProductInfoList.map(item => item.orderDetailId),
                  sourceType: this.sourceType,
                  afterSalesType:4
                }
                uni.navigateTo({
                  url: '/pages/afterSales/refundDetails?params=' +
                    encodeURIComponent(JSON.stringify(params))
                })
              // }

            } else {
              this.canApply = false
              // 抱歉，您的订单已于2015年02月10日超过售后申请时效
              Dialog.confirm({
                message: '抱歉，您的订单已于' + res.data ? res.data : res.message + '超过售后申请时效',
                confirmButtonText: '联系客服',
                cancelButtonText: '取消',
                confirmButtonColor: '#ff6203',
                cancelButtonColor: '#888'
              }).then(() => {
                // 联系客服逻辑
                uni.makePhoneCall({
                  phoneNumber: '400-123-4567' // 替换为真实客服电话
                });
              }).catch(() => {
              });
            }
          }).catch(err => {
            console.error('申请售后验证失败:', err)
            this.canApply = false
          })
        },
        // 跳转申请售后详情页面  关闭弹窗
        closeApplyPopup() {
          this.showAfterSale = false
        },

        // 查看售后单详情
        toAfterSaleProcessDetail(item){
            const params = {
              orderId:this.orderId,
              orderStatus:this.orderStatus,
              afterSalesId:item.afterSalesId,
              afterSalesType:4,
            }
            uni.navigateTo({
              url: '/pages/orders/refundOrderDetail?params=' +
              encodeURIComponent(JSON.stringify(params))
            })
        },



        // 倒计时方法
        handleTimeout() {
          this.status = 'close'
          // this.navBarTitle = '交易关闭'
          clearInterval(this.timer)
        },
        // 修改倒计时方法
        startCountdown() {
          const THIRTY_MINUTES = 30 * 60 * 1000
          const orderTimestamp = new Date(this.orderTime).getTime()
          const endTimestamp = orderTimestamp + THIRTY_MINUTES

          // 立即执行一次时间判断
          const checkTimeout = () => {
            const currentTime = Date.now()
            this.remainingTime = endTimestamp - currentTime

            if (this.remainingTime <= 0) {
              this.handleTimeout()
              clearInterval(this.timer)
            }
          }
          // 先执行一次立即检查
          checkTimeout()
          // 设置定时器
          this.timer = setInterval(checkTimeout, 1000)
        },
        /**
        * 接口
        */
        // 获取订单详情
        getOrderDetail(orderId) {
          // this.loadingIsShow = false
          getOrderDetailApi(orderId).then(res => {
            console.log(res, '订单详情')
            if (res.code == 200) {
                this.ordeDetailProductInfoList = res?.data?.ordeDetailProductInfoList || []
                this.productId = this.ordeDetailProductInfoList[0]?.productId || undefined  //再来一单按钮需要用到
                this.selectSuk = this.ordeDetailProductInfoList[0]?.specName || undefined  //再来一单按钮需要用到
                this.productAttrValueId = this.ordeDetailProductInfoList[0]?.productAttrValueId || undefined  //再来一单按钮需要用到
                this.orderDetailIdList = this.ordeDetailProductInfoList.map(item => item.orderDetailId)
                console.log(this.orderDetailIdList, 'orderDetailIdList')
                this.userName = res?.data?.wxUserBaseInfoResponse.nickName || undefined
                this.userTel = res?.data?.wxUserBaseInfoResponse.phone || undefined
                // this.orderType = res?.data?.orderType || undefined
                this.freight = res?.data?.freight || 0
                this.orderNo = res.data.orderNo || undefined
                this.orderTime = res.data.orderTime || undefined
                this.payPoints = res.data.payPoints || '0'
                this.payAmount = res.data.payAmount || '0'
                this.totalAmount = res.data.totalAmount || '0'
                this.fullDiscount = res.data.fullDiscount || undefined //满减活动
                this.coupon = res.data.coupon || undefined //优惠券
                const shippingType = res.data.shippingType
                this.shippingType = shippingType
                this.orderStatus = res.data.orderStatus || this.orderStatus //订单状态-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款 5: 已取消  6: 待使用
                this.wxUserBaseInfo = res.data.wxUserBaseInfoResponse || {}
                this.ebUserAddressList = this.wxUserBaseInfo.ebUserAddressList || []
                this.receivingAddress = this.ebUserAddressList.find(item => item.id == this.addressId)

                this.usedTimes= res.data?.usedTimes || 0
                this.expireDate = res.data?.expireDate || ''
                this.isShowGoUse = res.data?.isShowGoUse || 1
                this.isShowAfterSales = res.data?.isShowAfterSales || 1 //有预约订单显示申请售后按钮
                this.orderInfo= {
                    orderId: res.data.orderId,
                    orderNo: res.data.orderNo,
                    orderTime: res.data.orderTime,
                    payPoints: res.data.payPoints || 0,
                    payAmount: res.data.payAmount || 0,
                    totalAmount: res?.data?.totalAmount || 0,
                    fullDiscount: res.data?.fullDiscount || undefined,
                    coupon: res?.data?.coupon|| undefined,
                    shippingType: res?.data?.shippingType || '1',
                    orderStatus: res.data.orderStatus,
                    wxUserBaseInfo: res.data.wxUserBaseInfoResponse,
                    freight:res?.data?.freight || 0,
                    orderType: res.data.orderType

                }
                this.orderType = res.data.orderType  //商品类型  0=商品订单 1=服务订单
                this.isAllApplied = this.ordeDetailProductInfoList.every( item => item.afterSalesStatus && item.afterSalesStatus !== -1 && item.afterSalesStatus!==3);
                console.log(this.isAllApplied, 'isAllApplied')
                if (Number(this.orderStatus) == 4 && res.data.countdownTime !== '00:00:00' && res.data.countdownTime !== '00:00:01' && res.data.countdownTime !== '00:01' && res.data.countdownTime !== '00:00') {
                  // 新增时间判断逻辑
                  const THIRTY_MINUTES = 30 * 60 * 1000
                  const rawDate = res.data.orderTime
                  const currentorderTime = rawDate.replace(/-/g, '/')
                  console.log(currentorderTime, 'currentorderTime')
                  const orderTime = new Date(currentorderTime).getTime()
                  console.log(orderTime, 'orderTime')
                  const currentTime = Date.now()

                  // 立即判断是否超时
                  if (currentTime - orderTime > THIRTY_MINUTES) {
                    this.status = 'close'
                    this.orderStatus = 5
                    this.isCancel = true
                    this.cancelOrderWhenTimeout()
                    return  // 直接返回不启动倒计时
                  }
                  // 只有未超时才启动倒计时
                  this.startCountdown()
                } else if (Number(this.orderStatus) == 4 && (res.data.countdownTime == '00:01' || res.data.countdownTime == '00:00:01' || res.data.countdownTime == '00:00:00' || res.data.countdownTime == '00:00')) {
                  this.cancelOrderWhenTimeout()
                }

            }
          })
        },
        async cancelOrderWhenTimeout() {
            try {
              const res = await cancelOrderApi(this.orderId);
              console.log(res, '取消订单');
              if (res.code == 200) {
                this.getOrderDetail(this.orderId);
              } else {
                console.error('取消订单失败');
              }
            } catch (error) {
              console.error('调用取消订单接口出错', error);
            }
        },

      }
  
  }
  </script>
    <style lang="scss" scoped>
    // @import '@/styles/variables.scss';

    .content {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      height: 100vh;
      overflow: hidden;
      z-index: -2;
      background-color: #FFFFFF;
    }

    .bgCart {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      background-color: #f9f9f9;
      height: 100vh;
      // height: calc(100vh - 70px);
    }

    // 滚动
    .scroll-content {
      flex: 1;
      height: 1px;
    }

    .cartTop {
      background-color: #ffffff;
      padding-left: 24px;
      padding-right: 24px;
      padding-top: 25px;

      // 页面标题部分
      .cartAd {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .cartAd_title {
        font-size: 60rpx;
        text-align: left;
        line-height: 60rpx;
        color: #111111;
      }

      .userInfo {
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
        padding-bottom: 23px;

      }

      .userInfo_left {
        //左边用户信息
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-items: center;
        width: 75%;
      }

      .user_address {
        //住址
        font-size: 28rpx;
        text-align: left;
        color: #737373;
        width: 100%;
        display: flex;
        align-items: center;
      }

      .user_address_text {
        max-width: 75%;
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 显示省略号 */
      }

      .userInfo_bottom {
        // font-weight: bolder;
        font-size: 28rpx;
        text-align: left;
        color: #737373;
        line-height: 28rpx;
        // margin-top: 13px;

      }

      .userInfo_right {
        float: right;
        text-align: right;
      }

    }

    // 配送方方式
    .tab-bar {
      padding: 0px 2px;
      // width: 112px;
      height: 20px;
      // background: #F0F0F0;
      // border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    // 日月周统计

    //自提  同城配送
    .gray {
      // padding:2px;
      height: 20px;

      // border-radius: 10px;
      .tabbar-item {
        // flex: auto;
        z-index: 1;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        // padding: 0px 6px;
        font-size: 24rpx;
        // font-weight: 500;
        // color: #111111;

        background: #FF6203;
        border-radius: 10px;
        padding: 0px 12px;
        // padding: 0px 18px;
        color: #ffffff;

        // &.active {
        //   background: #FF6203;
        //   border-radius: 10px;
        //   padding: 0px 12px;
        //   // padding: 0px 18px;
        //   color: #ffffff;
        // //    &.option{
        // //    font-weight: bold;
        // //    background: #FFECE8;
        // //    border-radius: 6px;
        // //    color: #F54545;
        // // }
        // // &.state{
        // //   color:#FA8537;
        // //   background: #FFF5E8;
        // // }
        // }

      }
    }

    // 标题下面的横线
    .line {
      height: 9px;
      width: 100%;
      background: #f9f9f9;
      // margin-top: 26px;
      // margin-bottom: 26px;
    }

    // 自提点
    .self-pickup {
      margin-top: 10px;
      padding: 24px;
      background-color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    // 有自提点的内容
    .self-pickup-left {
      width: 75%;
      display: flex;
      align-items: center;

      .self_pickup_pic {
        width: 20%;

        img {
          width: 100%;
          height: auto;
        }
      }

      // 图片右边的文字
      .self_pickup_left_l {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 70%;
        margin-left: 15px;

        .left_top {
          // flex: auto;
          font-size: 28rpx;
          text-align: left;

          .self_pickup_name {
            color: #737373;
            margin-right: 7px;
          }

          .distance {
            color: #FF6203;
          }
        }

        .left_bottom {
          // margin-top: 12px;
          // flex: auto;
          font-size: 22rpx;
          text-align: left;
          color: #737373;
        }
      }

    }

    .self-pickup-right {
      display: flex;

      .spr_text {
        margin-left: 8px;
        font-size: 22rpx;
        text-align: left;
        color: #888888;
      }
    }

    //   同城配送
    .city_delivery_content {
      display: flex;
      align-items: center;

      .city_delivery_content_left {
        width: 85%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .left_top {
          // flex: auto;
          font-size: 28rpx;
          text-align: left;
        }

        .left_bottom {
          font-size: 22rpx;
          text-align: left;
          color: #737373;
        }
      }

      .city-delivery {
        width: 15%;

        .city_delivery_pic {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;

          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }

    // 无自提点
    .no-self-pickup {
      font-weight: bolder;
      font-size: 28rpx;
      text-align: left;
      color: #FF6203;
    }

    .cartList {
      padding: 24px;
      width: calc(100% - 48px);
      background-color: #ffffff;


      .cartListBottom {
        margin-top: 48rpx;
      }

      .useStatus {
        margin-top: 48rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .useStatus-left {
          display: flex;
          align-items: center;

          .useStatus-label {
            font-size: 28rpx;
            line-height: 28rpx;
            text-align: left;
            color: #111111;
          }

          .useStatus-content {
            font-size: 28rpx;
            line-height: 28rpx;
            text-align: left;
            color: #888888;
            margin-left: 28rpx;
          }
        }

        .useStatus-right {}
      }
    }

    .goodsWraper {
      display: flex;
      flex-direction: column;
      width: 100%;
      //   margin-bottom: 15px;
      //   border-bottom: 1px solid #e5e5e5;  //显示包裹的时候  

      .wraper_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        .listTopLeft {
          color: #737373;
          font-size: 28rpx;
          line-height: 28rpx;
        }

        .listTopRight {
          color: #FF6203;
          font-size: 24rpx;
          line-height: 24rpx;
        }
      }

      .wraper_left {
        display: flex;
        // float: left;
        width: 100%;
        // margin-bottom: 15px;

        .goodsPic {
          width: 33%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          img {
            width: 100%;
            height: auto;
          }
        }

        .goodsText {
          position: relative;
          width: 67%;
          margin-left: 14px;
          // width: 150px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // padding-top: 5px;
          // padding-bottom: 6px;
          padding-top: 12rpx;
          padding-bottom: 20rpx;
          text-align: left;

          .goodsTop {
            // position: absolute;
            // top: 2%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .goods_T {
              font-size: 28rpx;
              text-align: left;
              color: #111111;
              max-width: 80%;
              line-height: 28rpx;
              // margin-top: 9px;  //display：flex   中 元素居中
              white-space: nowrap;
              /* 防止文本换行 */
              overflow: hidden;
              /* 超出部分隐藏 */
              text-overflow: ellipsis;
              /* 显示省略号 */

            }

            // 商品价格
            .goods_price {
              font-size: 28rpx;
              color: #737373;
              line-height: 28rpx;
            }
          }

          .googsMiddle {
            margin-top: 24rpx;
            // position: absolute;
            // top: 25%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 22rpx;
            color: #666666;

            .goods_specs {
              // margin-top: 7px;
              max-width: 80%;
              font-size: 22rpx;
              text-align: left;
              color: #ff6203;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
            }

            .goods_num {
              font-size: 22rpx;
              line-height: 22rpx;
              color: #666666;
            }

          }

          .goodsBottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .money {
              font-size: 28rpx;
              text-align: left;
              color: #737373;
              line-height: 28rpx;
            }

            .jifen_box {
              font-size: 28rpx;
              text-align: left;
              color: #999999;
              line-height: 28rpx;
              height: 28rpx;
            }
          }
        }
      }

      .wraper_left:last-child {
        margin-bottom: 0px;
      }
    }

    .goodsWraper:last-child {
      margin-bottom: 0px;
    }


// 页面所有按钮
// 商品或服务下方的的按钮区域
.detailsBtnArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62rpx;
    .btnAreaLeft {
        color: #888888;
        font-size: 22rpx;
        line-height: 22rpx;
        width: 20rpx;
    }
    .btnAreaRight {
        display: flex;
        justify-content: space-between;
    }

}

    // 页面所有按钮
    // 商品或服务下方的的按钮区域
    .btn-area {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 62rpx;
      padding-top: 14px;
      padding-bottom: 14px;

      .btnAreaLeft {
        color: #888888;
        font-size: 22rpx;
        line-height: 22rpx;
        width: 20rpx;
      }

      .btnAreaRight {
        display: flex;
        justify-content: space-between;
      }

    }

    // 黑字黑框按钮
    .blackBlackBtn {
      background-color: #Ffffff;
      border-radius: 38px;
      font-size: 28rpx;
      text-align: center;
      color: #111111;
      height: 62rpx;
      line-height: 60rpx;
      border: 1px solid #111111;
      padding-left: 10px;
      padding-right: 10px;
      min-width: 162rpx;
    }

    // 未付款页面底部的按钮
    .bottomBtnArea {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #f9f9f9;
      background-color: #ffffff;
      padding-bottom: 20px;
      padding-left: 24px;
      padding-right: 24px;
      width: calc(100% - 48px);
    }

    // 付款按钮
    .checkoutBtn {
      background-color: #FF6203;
      border-radius: 38px;
      font-size: 28rpx;
      text-align: center;
      color: #FFFFFF;
      height: 62rpx;
      line-height: 60rpx;
      padding-left: 50px;
      padding-right: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 45%;
    }

    .button {
      background-color: #Ffffff;
      border-radius: 38px;
      font-size: 28rpx;
      text-align: center;
      color: #111111;
      height: 62rpx;
      line-height: 60rpx;
      border: 1px solid #D4D4D4 !important;
      padding-left: 10px;
      padding-right: 10px;
      margin-right: 12px;
      // padding-left: 13px;
      // padding-right: 13px;
      // margin-right: 15px;
    }

    .checkBtn {
      border: 1px solid #FF6203 !important;
      background-color: transparent;
      /* width: 100%; */
      border-radius: 38px;
      font-size: 28rpx;
      text-align: center;
      color: #FF6203 !important;
      height: 62rpx;
      line-height: 60rpx;
      padding-left: 13px;
      padding-right: 13px;
    }

    button {
      border: none;
    }

    // 已付款的其他状态按钮区域
    .pageBottomBtnArea {
      padding-top: 48rpx;
      padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .pageBottomBtnArea_btn{
       display: flex;
       justify-content: space-between;
       
    }

    // 未付款页面底部的按钮
    .bottomBtnArea {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #f9f9f9;
      background-color: #ffffff;
      padding-bottom: 20px;
      padding-left: 24px;
      padding-right: 24px;
      width: calc(100% - 48px);
    }

    // 付款按钮
    .checkoutBtn {
      background-color: #FF6203;
      border-radius: 38px;
      font-size: 28rpx;
      text-align: center;
      color: #FFFFFF;
      height: 62rpx;
      line-height: 60rpx;
      padding-left: 50px;
      padding-right: 50px;
      width: 35%;
    }

    .checkoutBtn.disabled {
      background-color: #cccccc !important;
      color: #ffffff !important;
      pointer-events: none;
    }

    .grayBtn {
      background-color: #Ffffff;
      border-radius: 38px;
      font-size: 28rpx;
      text-align: center;
      color: #111111;
      height: 62rpx;
      line-height: 60rpx;
      border: 1px solid #D4D4D4 !important;
      width: 45%;
    }
    .grayBtn[disabled] {
      opacity: 0.6; /* 降低透明度表示禁用状态 */
      cursor: not-allowed; /* 显示禁用光标 */
      background-color: #f5f5f5; /* 更浅的背景色 */
      color: #999; /* 更浅的文字颜色 */
    }

    .orangeBtn {
      background-color: #FF6203;
      border: none;
      border-radius: 38px;
      font-size: 28rpx;
      text-align: center;
      color: #FFFFFF;
      height: 62rpx;
      line-height: 60rpx;
      width: 45%;
    }

    .orangeBtn button[plain] {
      border: none
    }

    //防止父元素高度塌陷
    .clearfix::before .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }

    .line_two {
      height: 5px;
      width: 100%;
      background: #f9f9f9;
      line-height: 5px;
    }


.code {
  font-size: 24rpx;
  text-align: right;
  color: #888888;
  line-height: 24rpx;
}

.copy {
  font-size: 24rpx;
  text-align: right;
  color: #111111;
  line-height: 24rpx;
}

.bottom{
  border-top: 1px solid #f9f9f9;
}
  ::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
  }

  ::v-deep .van-icon {
    color: #242629 !important;
  }

  ::v-deep .service-o-icon .van-icon {
    font-size: 44rpx !important;
    color: #000000 !important;
  }

.service-o-icon {
  width: 96rpx;
  height: 62rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  // padding-left: 24rpx;
  img {
    width: 45rpx;
    height: 45rpx;
  }

}

::v-deep .van-nav-bar__title {
  font-size: 28rpx;
  color: #333333;
}

::v-deep .van-button--warning {
  background-color: #FF6203;
}

::v-deep .van-icon-success {
  color: #ffffff !important;
}

::v-deep .van-submit-bar__bar {
  display: flex;
  justify-content: space-between !important;
  border-top: 1px solid #f9f9f9;
  padding-top: 32rpx !important;
  // height: 72px !important;
  // line-height: 72px !important;
}

::v-deep .disabledSubmit .van-button--danger,
.van-button--disabled,
.van-button--unclickable {
  background-color: #D4D4D4 !important;
  border: 1px solid #D4D4D4 !important;
}

// 组件 底部的线
::v-deep .van-goods-action,
.van-goods-action--safe {
  border-top: 1px solid #f9f9f9 !important;
}

// ::v-deep
// 向右的箭头
.van-icon-arrow {
  color: #666666 !important;
}

.r12 {
  margin-right: 12px;
}
.t28{
  margin-top: 28rpx;
}
.pb30{
  padding-bottom: 30rpx;
}
::v-deep .van-button--primary {
  width: 100%;
  height: 86rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  background: #FF6203 !important;
  border: 1px solid #ff6203 !important;
}
.fr{
  float: right;
}
  </style>
  